<template>
    <div class="user-list">
        <div class="item" v-for="item in data">
            <div class="item-header">
                <div class="left">{{item.targ}}</div>
                <div class="right">
                    <span class="color_02">{{item.state}}</span>
                    <van-icon name="delete" />
                </div>
            </div>
            <div class="item-content app-right-icon">
                <div class="text">
                    <span class="title">{{item.title}}</span>
                    <span class="date">发布：{{item.date}}</span>
                </div>
                <div class="img" :style="{display: item.img ? 'block' : 'none'}"><img :src="item.img" /></div>
            </div>
            <div class="item-btn">
                <div class="item-btn-text" :style="{visibility: item.date2 ? 'visible' : 'hidden'}">预约日期：{{item.date2}}</div>
                <div class="item-btn-list">
                    <div class="user-button" v-for="btn in item.btn"><span class="user-button__text">{{btn.text}}</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
    @import '../style/variable';
    .user-list {
        .item {
            background-color: @color-white;
            padding: 1rem 1.3rem;
            margin-bottom: 0.8rem;
            &-header {
                display: flex;
                justify-content: space-between;
                margin-bottom: 0.9rem;
                font-size: 1.2rem;
                color: #949494;
                .right {
                    display: flex;
                    align-items: center;
                    line-height: 1.7rem;
                    span:nth-of-type(1) {
                        margin-right: 0.6rem;
                    }
                }
            }
            &-content {
                position: relative;
                background-color: #F5F5F5;
                border-radius: 0.4rem;
                padding: 0.9rem 1rem;
                margin-bottom: 0.9rem;

                .text {
                    display: flex;
                    flex-direction: column;

                    .title {
                        color: #43484E;
                        font-size: 1.5rem;
                        margin-bottom: 0.7rem;
                    }
                    .date {
                        color: #7A7A7A;
                        font-size: 1.2rem;
                    }
                }
                .img {
                    position: absolute;
                    width: 4.8rem;
                    height: 4.8rem;
                    right: 1rem;
                    top: 50%;
                    transform: translate(0, -50%);
                    border: 1px solid #979797;
                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            &-btn {
                text-align: right;
                display: flex;
                justify-content: space-between;
                align-items: center;

                &-text {
                    color: #333E48;
                    font-size: 1.2rem;
                }
            }
        }
        .user-button {
            position: relative;
            display: inline-block;
            border: 1px solid #DADADA;
            border-radius: 1.3rem;
            padding: 0.5rem 1.8rem;
            cursor: default;
            user-select: none;
            margin-left: 1.3rem;
            &__text {
                font-size: 1.2rem;
                color: #333E48; 
            }
        }
        .user-button:before {
            content: " ";
            position: absolute;
            top: 50%;
            left: 50%;
            opacity: 0;
            width: 100%;
            height: 100%;
            border: inherit;
            border-color: #000;
            background-color: #000;
            border-radius: inherit;
            -webkit-transform: translate(-50%,-50%);
            transform: translate(-50%,-50%);
        }
        .user-button:active::before {
            opacity: 0.3;
        }
        .color_01 {
            color: #007AFF;
        }

        .color_02 {
            color: #09BB07;
        }

        .color_03 {
            color: #FF0000;
        }

        .color_04 {
            color: #333E48;
        }
    }
</style>

<script>

    import { Icon } from 'vant';

    export default {
        components: {
            [Icon.name]: Icon,
        },
        props: ['data'],
    }
</script>